<template>
  <div class="wrap">
    <div class="all_outer">
      <!-- 头部 -->
      <div class="header">
        <div class="head_top"></div>
        <div class="head_middle"></div>
        <div class="head_content">
          <div class="card_banner">
            <div class="card_banner_img"></div>
            <div class="gift-goin">
              <div class="gift-goin-left">
                <img
                  class="gift-goin-img"
                  src="https://tb2.bdstatic.com/tb/img/ihome_batou_icon_1334d8e.png"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div class="card-wrap">
            <div class="card-wrap-left">
              <div class="card-wrap-left-outer">
                <div
                  class="card-wrap-left-img"
                  @click="gotoCreate()"
                  title="修改贴吧"
                >
                  <a
                    ><img
                      class="card-wrap-left-img-img"
                      :src="barInfo.barLogo"
                      alt=""
                  /></a>
                </div>
                <div class="card-wrap-left-top">
                  <div style="font-size: 22px; color: #333">
                    {{ barInfo.barName }}
                  </div>
                  <button
                    style="background:#dceffe
                  color: #fff;
                  borderRadius:10px;
                  marginLeft:10px;
                  border-color: #eee;"
                    @click="focusOn"
                  >
                    关注/取消
                  </button>
                  <div
                    style="color: #ff7f3e; font-family: Arial; margin: 0 15px"
                  >
                    关注:{{ barInfo.beSubCount }}
                  </div>
                  <div
                    style="
                      color: #ff7f3e;
                      font-family: Arial;
                      margin-right: 15px;
                    "
                  >
                    帖子:{{ barInfo.propositionCount }}
                  </div>
                </div>
                <div class="card-wrap-left-content">
                  <div
                    style="
                      color: #4c4c4c;
                      text-decoration: none;
                      font-size: 14px;
                      /* float: left; */
                      /* padding-right: 30px; */
                      position: relative;
                      max-width: 280px;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                    "
                  >
                    {{ barInfo.description }}
                  </div>
                  <div style="color: #aaa">目录:游戏交易及功能</div>
                </div>
              </div>
            </div>
            <div class="card-wrap-right">
              <div class="card-wrap-right-outer">
                <div class="card-wrap-right-outer-left">
                  <a class="card-wrap-right-outer-left-text">签到</a>
                </div>
                <div class="card-wrap-right-outer-right">
                  <div class="card-wrap-right-outer-right-text">
                    <div>10月06日</div>
                    <div>漏签0天</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-nav">
            <div class="card-nav-left">
              <div class="card-nav-left-item">看帖</div>
              <div class="card-nav-left-item">图片</div>
              <div class="card-nav-left-item">吧主推荐</div>
              <div class="card-nav-left-item">我的游戏</div>
            </div>
            <div class="card-nav-right">
              <input type="text" placeholder="吧内搜索" v-model="search" />
              <button @click="handleSearch">搜索</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 身体 -->
      <div class="body">
        <div class="body-left">
          <div
            class="body-left-item"
            v-for="item in DynamicData"
            key="item._id"
          >
            <div>
              <div class="tag">{{ item.commentCount }}</div>
            </div>
            <div class="body-left-item-content">
              <div class="body-left-item-title" @click="goDiscuss(item._id)">
                {{ item.title }}
              </div>
              <div class="body-left-item-intro">
                {{ item.description }}
              </div>
              <div class="body-left-item-img" v-if="item.imageList[0]">
                <img
                  :src="item.imageList[0].url"
                  alt=""
                  style="
                    height: 105px;
                    width: 150px;
                    aspect-ratio: auto 150 / 105;
                  "
                />
              </div>
            </div>
            <div class="body-left-item-person" title="作者">
              <div>{{ item.user.username }}</div>
              <div class="body-left-item-person-flex" title="回复">
                <div>{{ item.user.username }}</div>
                <div class="body-left-item-person-right">13:53</div>
              </div>
            </div>
          </div>
          <div class="body-left-footer">
            <div>
              <el-pagination
                v-model:currentPage="currentPage3"
                v-model:page-size="pageSize3"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="prev, pager, next, jumper,sizes "
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
            <div class="body-left-footer-footer">共有贴子数 {{ total }}篇</div>
          </div>
        </div>
        <div class="body-right">
          <div class="body-king">
            <div class="body-king-outer">
              <div class="body-king-outer-three">
                <div class="body-king-outer-three-gift">
                  <img
                    src="https://tb2.bdstatic.com/tb/img/single_member_100_8a10f9f.png"
                    alt=""
                  />
                  <div class="body-king-outer-three-gift-text">皇冠身份</div>
                </div>
                <div class="body-king-outer-three-list">
                  <div>发贴红色标题</div>
                  <div>显示红名</div>
                  <div>签到六倍经验</div>
                </div>
              </div>
              <div class="body-king-outer-power">
                <div class="body-king-outer-power-more">更多定制特权</div>
                <div class="body-king-outer-power-change">兑换本吧会员</div>
              </div>
              <div class="body-king-outer-card">
                赠送补签卡1张,获得<a
                  href=""
                  style="color: #2c63b5; text-align: center; cursor: pointer"
                  >[经验书购买权]</a
                >
              </div>
            </div>
          </div>
          <div class="body-qrcode">
            <h4 style="margin-left: -90px">扫二维码下载贴吧客户端</h4>
            <div class="body-qrcode-content">
              <div class="app_download_info">
                <div>下载贴吧APP11</div>
                <div>看高清直播、视频！</div>
              </div>
              <div class="app_download_icon"></div>
            </div>
          </div>
          <div class="body-message">
            <div class="body-message-one">
              <h4>本吧信息</h4>
              <a href="">查看详情></a>
            </div>
            <div class="body-message-two">申请吧主</div>
            <div class="body-message-three">
              <div>会员： 游神</div>
              <div>目录： 游戏交易及功能</div>
            </div>
          </div>
          <div class="body-friend">
            <h4 class="body-friend-title">友情贴吧</h4>
            <div class="body-friend-all">
              <div class="body-friend-item">
                <img src="./img/friend.jpg" alt="" class="body-friend-img" />
                <div>你的含往往</div>
              </div>
              <div class="body-friend-item">
                <img src="./img/fiend1.jpg" alt="" class="body-friend-img" />
                <div>你的名字</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <TiebaComment />
    </div>
  </div>
  <div class="dialog">
    <el-dialog title="修改贴吧信息" v-model="visibleEdit" width="50%">
      <el-form ref="form">
        <el-form-item label="贴吧名称">
          <el-input v-model="editBarInfo.barName"></el-input>
        </el-form-item>
        <el-form-item label="贴吧描述">
          <el-input v-model="editBarInfo.description"></el-input>
        </el-form-item>
        <el-form-item label="贴吧头像">
          <el-upload
            class="avatar-uploader"
            :action="`${baseUrl}/upload/image`"
            :headers="headers"
            :name="`image`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="editBarInfo.barLogo || imageUrl"
              :src="editBarInfo.barLogo ? editBarInfo.barLogo : imageUrl"
              class="avatar"
              width="300"
            />
            <el-icon
              v-else
              class="avatar-uploader-icon"
              style="background: brown"
            >
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="success">修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage, type UploadProps } from "element-plus";
import router from "@/router";
export default defineComponent({
  name: "Inn",
});
</script>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import _ from "@/utils/local";
import { cloneDeep } from "lodash";
import bar from "@/api/bar";
import type { typeDynamicList } from "@/api/bar";
import { useUserStore } from "@/stores/user";
const currentPage3 = ref(1);
const pageSize3 = ref(10);
const total = ref(0);
const search = ref("");
const search2 = ref("");
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const input = ref("");
const textarea = ref("");
const DynamicData = ref<typeDynamicList>();
const store = useUserStore();

const handleSizeChange = (val: number) => {
  pageSize3.value = val;
};
const handleCurrentChange = (val: number) => {
  currentPage3.value = val;
};
// 查询 按钮逻辑
const handleSearch = () => {
  if (!search.value) {
    currentPage3.value = 1;
  }
  search2.value = search.value;
};
// 贴吧基本信息
const barInfo = computed(() => {
  return JSON.parse(_.getItem("barInfo"));
});

// 请求帖子分页列表
watch(
  [pageSize3, currentPage3, search2],
  async () => {
    const re = await bar.requestDynamic(
      barInfo.value._id,
      currentPage3.value,
      pageSize3.value,
      search2.value
    );
    total.value = re.count;
    DynamicData.value = re.allTip;
  },
  { immediate: true }
);

// 关注 贴吧
const focusOn = async () => {
  if (!store.userInfo._id) return router.push("/login");
  try {
    const re = await bar.requestFocusOnBar(barInfo.value._id);
    if (re.isSub) {
      ElMessage.success("关注成功");
    } else {
      ElMessage.info("已取消关注");
    }
  } catch (e: any) {
    ElMessage.error(e);
  }
};

//跳转评论页面
const goDiscuss = (id: any) => {
  console.log(id, "id");
  // id 帖子id 通过帖子id 进入响应的评论也
  router.push(`/p?id=${id}`);
  // router.push(`/Inn?barId=${barDetail._id}`);
};

// ## dialog ##
const visibleEdit = ref(false);
const editBarInfo = ref();
editBarInfo.value = cloneDeep(JSON.parse(_.getItem("barInfo")));

// 修改 贴吧信息
const gotoCreate = () => {
  if (!store.userInfo._id) return router.push("/login");
  if (!(barInfo.value.creator === store.userInfo._id))
    return ElMessage.info("仅吧主能修改");
  visibleEdit.value = true;
};
const imageUrl = ref("");
/* 环境变量读取图片url */
const baseUrl = import.meta.env.VITE_APP_API;
const headers = ref({
  Authorization: "Bearer" + " " + store.token,
});
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  editBarInfo.value.barLogo = response.data.url;
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("仅支持image或jpeg格式");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片大小不得超过2M");
    return false;
  }
  return true;
};
const cancel = () => {
  visibleEdit.value = false;
  editBarInfo.value = cloneDeep(JSON.parse(_.getItem("barInfo")));
};
const success = async () => {
  try {
    console.log(editBarInfo.value);
    
    await bar.requestEditBar(editBarInfo.value);
    _.setItem(JSON.stringify(editBarInfo.value), "barInfo");
    router.go(0);
    ElMessage.success("修改完成");
  } catch (e: any) {
    ElMessage.error(e);
  }
  visibleEdit.value = false;
};
</script>

<style lang="scss" scoped>
.wrap {
  background-color: #dceffe;

  .all_outer {
    width: 1000px;
    background-color: #dceffe;
    text-align: center;
    margin: 0 auto;

    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
    line-height: 22px;

    .header {
      .head_content {
        .card_banner {
          display: block;
          position: relative;
          overflow: hidden;

          .card_banner_img {
            height: 180px;
            // position: absolute;
            background-image: url(https://tb1.bdstatic.com/tb/cms/frs/bg/default_head20141014.jpg);
          }

          .gift-goin {
            width: 248px;
            height: 50px;
            position: absolute;
            right: 40px;
            top: 40px;
            overflow: hidden;

            .gift-goin-left {
              width: 248px;
              height: 50px;
              position: absolute;
              right: 0;
              z-index: 1;

              .gift-goin-img {
                width: 50px;
                height: 50px;
                position: absolute;
                right: 0;
                top: 0;
                cursor: pointer;
                z-index: 2;
              }
            }
          }
        }

        .card-wrap {
          height: 90px;
          background-color: #f3f5f8;

          .card-wrap-left {
            width: 615px;
            height: 89px;
            // background-color: blueviolet;
            float: left;

            .card-wrap-left-outer {
              width: 416px;
              height: 74px;
              padding-left: 200px;
              padding-top: 15px;
              // background-color: yellowgreen;
              position: relative;

              .card-wrap-left-img-img {
                // border: 2px solid white;
                padding: 5px;
                display: block;
                width: 150px;
                height: 150px;
                position: absolute;
                background-color: #fefefe;
                top: -80px;
                left: 20px;
                z-index: 1;
                cursor: pointer;
              }

              .card-wrap-left-top {
                width: 416px;
                height: 40px;
                // background-color: brown;
                display: flex;
                align-items: center;
              }

              .card-wrap-left-content {
                display: flex;
                height: 20px;
                // background-color: burlywood;
              }
            }
          }

          .card-wrap-right {
            width: 180px;
            height: 50px;
            // background-color: coral;
            margin: 15px 20px 0 0;
            float: right;
            box-sizing: border-box;

            .card-wrap-right-outer {
              display: flex;
              height: 50px;
              border: 2px solid white;
            }

            .card-wrap-right-outer-left {
              width: 100px;
              background-color: #4f8ce8;

              .card-wrap-right-outer-left-text {
                line-height: 50px;
                color: whitesmoke;
                font-size: 20px;
              }
            }

            .card-wrap-right-outer-right {
              width: 80px;
              background-color: #ffffff;

              .card-wrap-right-outer-right-text {
                color: #737373;
              }
            }
          }
        }

        .card-nav {
          height: 50px;
          display: flex;
          background-color: #eceff2;

          .card-nav-left {
            height: 50px;
            width: 750px;
            display: flex;

            .card-nav-left-item {
              width: 76px;
              height: 50px;
              line-height: 50px;
            }

            .card-nav-left-item:hover {
              background-color: #dfe1e4;
            }
          }

          .card-nav-right {
            line-height: 50px;
          }
        }
      }
    }

    .body {
      background-color: #ffffff;
      display: flex;

      .body-left {
        .body-left-item {
          // height: 216px;
          // background-color: #3e89fa;
          padding: 10px 0;
          margin: 0 20px;
          height: 180px;
          display: flex;

          &:hover {
            background-color: #f1f3f5;
          }

          .tag {
            display: inline-block;
            width: 50px;
            height: 30px;
            line-height: 26px;
            margin-right: 20px;
            text-align: center;
            background: url(//tb2.bdstatic.com/tb/img/f_reply_bg_8ec77f0.png)
              no-repeat;
          }

          .body-left-item-content {
            width: 460px;

            .body-left-item-title {
              color: #2d64c4;
              cursor: pointer;
              text-align: left;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              &:hover {
                text-decoration: underline;
              }
            }

            .body-left-item-intro {
              text-align: left;
              width: 460px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #666;
            }

            .body-left-item-img {
              position: relative;
              overflow: hidden;
              text-align: left;
            }
          }

          .body-left-item-person {
            width: 165px;
            text-align: left;

            .body-left-item-person-flex {
              display: flex;
            }

            .body-left-item-person-right {
              margin-left: 40px;
            }
          }
        }

        .body-left-footer-footer {
          width: 740px;
          // float: left;
          text-align: left;
          margin-top: 7px;
          margin-left: 18px;
        }
      }

      .body-right {
        width: 260px;

        .body-king {
          .body-king-outer {
            width: 206px;
            height: 204px;
            padding: 16px;

            .body-king-outer-three {
              height: 86px;
              display: flex;

              .body-king-outer-three-gift {
                display: block;
                width: 64px;
                height: 64px;
                margin: 0 auto;

                .body-king-outer-three-gift-text {
                  display: block;
                  position: relative;
                  color: #666;
                  text-align: center;
                }
              }

              .body-king-outer-three-list {
                display: flex;
                color: #666;
                flex-direction: column;
                justify-content: space-around;
              }

              .body-king-outer-three-gift img {
                width: 100%;
              }
            }

            .body-king-outer-power {
              .body-king-outer-power-more {
                background-color: #f7f7f7;
                color: #999;
                text-align: center;
                cursor: pointer;
                height: 21px;
                line-height: 21px;
                border: 1px solid #f7f7f7;
              }

              .body-king-outer-power-change {
                width: 100%;
                height: 28px;
                line-height: 28px;
                color: #fa7d3e;
                background: #fff;
                border: 1px solid #fa7d3e;
                border-radius: 2px;
                text-align: center;
                margin-top: 5px;
              }
            }

            .body-king-outer-card {
              color: #999;
              margin-top: 4px;
              margin-bottom: 19px;
              white-space: nowrap;
            }
          }
        }

        .body-qrcode {
          height: 140px;

          .body-qrcode-content {
            display: flex;
            justify-content: space-around;

            .app_download_info {
              overflow: hidden;
              line-height: 24px;
              padding-top: 12px;
              color: #666;
            }

            .app_download_icon {
              width: 75px;
              height: 75px;
              background: url(//tb2.bdstatic.com/tb/img/frs-aside/icon_761f249.png)
                center / cover;
              // float: right;
            }
          }
        }

        .body-message {
          width: 206px;
          height: 121px;
          padding: 16px;

          .body-message-one {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          .body-message-two {
            width: 90px;
            color: #fff;
            background: #3e89fa;
            border-bottom-color: #2b71d9;
          }

          .body-message-three {
            text-align: left;
            margin-top: 10px;
          }
        }

        .body-friend {
          width: 206px;
          height: 121px;
          padding: 16px;

          .body-friend-title {
            text-align: left;
          }

          .body-friend-all {
            display: flex;

            .body-friend-item {
              .body-friend-img {
                width: 60px;
                height: 60px;
              }
            }
          }
        }
      }
    }

    .footer {
      padding-top: 20px;
      background-color: #f9f9f9;
      height: 441px;

      .footer-outer {
        margin-left: 20px;
        height: 441px;

        .footer-outer-one {
          .footer-outer-outer {
            width: 720px;
            overflow: hidden;

            .footer-one-left {
              float: left;
            }

            .footer-one-right {
              float: right;
              display: flex;
            }
          }
        }

        .footer-outer-two {
          display: flex;

          .footer-outer-two-icon {
            display: inline-block;
            width: 48px;
            height: 20px;
            cursor: pointer;
            background: url(//tb2.bdstatic.com/tb/img/poster/icon_topic_n_d25f560.png)
              no-repeat;
            position: relative;
            top: 5px;
            margin-left: 3px;
          }
        }

        .footer-outer-three {
          .footer-outer-three-nav {
            display: flex;
            padding: 12px 0;

            .footer-outer-three-nav-one {
              width: 48px;
              height: 20px;
              margin: 0;
              padding: 0;
              background: url(//tb2.bdstatic.com/tb/img/icon_png8_old_b8f2ed8.png)
                no-repeat;
              cursor: pointer;
            }

            .footer-outer-three-nav-three {
              width: 48px;
              height: 20px;
              margin: 0;
              padding: 0;
              background: url(//tb2.bdstatic.com/tb/img/icon_png8_old_b8f2ed8.png)
                no-repeat;
              cursor: pointer;
            }

            .footer-outer-three-nav-four {
              width: 48px;
              height: 20px;
              margin: 0;
              padding: 0;
              background: url(//tb2.bdstatic.com/tb/img/icon_png8_old_b8f2ed8.png)
                no-repeat;
              cursor: pointer;
            }

            .footer-outer-three-nav-five {
              width: 48px;
              height: 20px;
              margin: 0;
              padding: 0;
              background: url(//tb2.bdstatic.com/tb/img/icon_png8_old_b8f2ed8.png)
                no-repeat;
              cursor: pointer;
            }

            .footer-outer-three-nav-six {
              width: 48px;
              height: 20px;
              margin: 0;
              padding: 0;
              background: url(//tb2.bdstatic.com/tb/img/icon_png8_old_b8f2ed8.png)
                no-repeat;
              cursor: pointer;
            }

            .footer-outer-three-nav-seven {
              width: 48px;
              height: 20px;
              margin: 0;
              padding: 0;
              background: url(//tb2.bdstatic.com/tb/img/icon_png8_old_b8f2ed8.png)
                no-repeat;
              cursor: pointer;
            }
          }

          .footer-outer-three-nav-last {
            background: url(//tb2.bdstatic.com/tb/img/icon_fullscreen_max_6daeb71.png)
              no-repeat;
          }
        }
      }
    }
  }
}

.dialog :deep(.el-dialog) {
  background-image: url(https://tb1.bdstatic.com/tb/cms/frs/bg/default_head20141014.jpg);
  background-size: cover;
}
.dialog :deep(.el-form :nth-child(2) .el-form-item__content) {
  border: 1px solid #ccc;
  border-radius: 10px;
}
.dialog :deep(.el-form :nth-child(1) .el-form-item__content) {
  border: 1px solid #ccc;
  border-radius: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.avatar-uploader img {
  width: 200px;
  height: 200px;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
